<template>
	<view class="container">
		<uv-navbar bgColor="#f56c6c" leftIconColor='#fff'>
			<template v-slot:left>
			</template>
			<template v-slot:right>
				<uv-icon name="more-circle" size="24" color='#fff'></uv-icon>
			</template>
		</uv-navbar>

		<scroll-view scroll-y class="page" @scrolltolower="loadData" refresher-background='#f56c6c' refresher-enabled="true">
			<view class="main">
				<view class="user">

					<view class="user_left">

						<view class="avatar">
							<uv-avatar mode="aspectFill" src="https://img2.baidu.com/it/u=3412909306,1442259109&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" size="70"></uv-avatar>
						</view>

						<view class="username_info">
							<view class="ui-info">
								<view class="username">小赵</view>
								<uv-icon name="man" color="#fff"></uv-icon>
							</view>
							<view class="ui-ty">
								<view class="uit_item">广州</view>
								<view class="uit_item">|</view>
								<view class="uit_item">摄影师</view>
								<view class="uit_item">23岁</view>
							</view>
						</view>

					</view>
					<view class="user_right">
						<uv-button type="error" :plain="true" :hairline="true" text="编辑" shape="circle"></uv-button>
					</view>

				</view>


				<view class="m_center">
					<view class="c_item">
						<view class="c_item_l">动态</view>
						<view class="c_item_count">20</view>
					</view>
					<view class="c_item">
						<view class="c_item_l">关注</view>
						<view class="c_item_count">196</view>
					</view>
					<view class="c_item">
						<view class="c_item_l">粉丝</view>
						<view class="c_item_count">87</view>
					</view>
				</view>

				<view class="m_tabs">
					<view></view>
					<uv-tabs :list="list" @click="click" lineColor="#f56c6c"
						itemStyle='height:44px; padding:0 40px'></uv-tabs>
					<view></view>
				</view>

				<view class="trends">
					<ul>
						<li class="user_item">
							<view class="main_top">
								<view class="main_top_left">
									<view class="mtl_avatar">
										<uv-avatar src="https://img2.baidu.com/it/u=3412909306,1442259109&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="cover" size="32"></uv-avatar>
									</view>
									<view class="mtl_user">
										<view class="mtl_user_top">
											<view class="name">小赵</view>
											<view class="sex"><uv-icon name="man" color="#2979ff"></uv-icon>

											</view>
											<view class="time">3分钟前</view>
										</view>
										<view class="mtl_user_bottom">
											<view style="margin-right: 5px;">摄影师</view>
											<view class="mtl_user_bottom_rz">已认证</view>
										</view>
									</view>
								</view>
								<view class="main_top_right">
									<uv-icon name="empty-address" size="32rpx"></uv-icon>
									<view class="address">广州</view>
								</view>
							</view>
							<view class="main_center">
								<view class="mc_text">
									<view class="mc_title word">
										第一条动态
									</view>
									<view class="mc_content word">
										第一条动态内容介绍
									</view>
								</view>
								<view class="mc_imgs">
									<image mode="aspectFill" src="https://img1.baidu.com/it/u=2278616781,1292313571&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
									<image  mode="aspectFill" src="https://img2.baidu.com/it/u=918835821,3340688162&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=1082"></image>
									<image  mode="aspectFill" src="https://img2.baidu.com/it/u=3082804013,660672339&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
									<image  mode="aspectFill" src="https://img1.baidu.com/it/u=3223533286,2157719445&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
									<image  mode="aspectFill" src="https://img0.baidu.com/it/u=2044544750,1067073529&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
									
								</view>
							</view>
							<view class="main_bottom">
								<view class="mb_w">
									<uv-icon name="camera"></uv-icon>
									<view class="count">12</view>
								</view>
								<view class="mb_w">
									<uv-icon name="chat"></uv-icon>
									<view class="count">30</view>
								</view>
								<view class="mb_w">
									<uv-icon name="thumb-up"></uv-icon>
									<view class="count">51</view>
								</view>
							</view>
						</li>
						<li class="user_item">
							<view class="main_top">
								<view class="main_top_left">
									<view class="mtl_avatar">
										<uv-avatar src="https://img2.baidu.com/it/u=3412909306,1442259109&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="cover" size="32"></uv-avatar>
									</view>
									<view class="mtl_user">
										<view class="mtl_user_top">
											<view class="name">小赵</view>
											<view class="sex"><uv-icon name="man" color="#2979ff"></uv-icon>
											</view>
											<view class="time">4小时前</view>
										</view>
										<view class="mtl_user_bottom">
											<view style="margin-right: 5px;">摄影师</view>
											<view class="mtl_user_bottom_rz">已认证</view>
										</view>
									</view>
								</view>
								<view class="main_top_right">
									<uv-icon name="empty-address" size="32rpx"></uv-icon>
									<view class="address">广州</view>
								</view>
							</view>
							<view class="main_center">
								<view class="mc_text">
									<view class="mc_title word">
										这是第二条标题
									</view>
									<view class="mc_content word">
										这是第二条内容介绍
									</view>
								</view>
								<view class="mc_imgs">
									<image src="https://img0.baidu.com/it/u=2157108140,947264254&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"></image>
									<image src="https://img0.baidu.com/it/u=2526641685,1489530589&fm=253&fmt=auto&app=138&f=JPEG?w=519&h=500"></image>
									<image src="https://img0.baidu.com/it/u=1097661101,702630448&fm=253&fmt=auto&app=138&f=JPEG?w=501&h=500"></image>
								</view>
							</view>
							<view class="main_bottom">
								<view class="mb_w">
									<uv-icon name="camera"></uv-icon>
									<view class="count">12</view>
								</view>
								<view class="mb_w">
									<uv-icon name="chat"></uv-icon>
									<view class="count">3</view>
								</view>
								<view class="mb_w">
									<uv-icon name="thumb-up"></uv-icon>
									<view class="count">54</view>
								</view>
							</view>
						</li>
						<li class="user_item">
							<view class="main_top">
								<view class="main_top_left">
									<view class="mtl_avatar">
										<uv-avatar src="https://img2.baidu.com/it/u=3412909306,1442259109&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" mode="cover" size="32"></uv-avatar>
									</view>
									<view class="mtl_user">
										<view class="mtl_user_top">
											<view class="name">名字</view>
											<view class="sex"><uv-icon name="man" color="#2979ff"></uv-icon>
											</view>
											<view class="time">4小时前</view>
										</view>
										<view class="mtl_user_bottom">
											<view style="margin-right: 5px;">摄影师</view>
											<view class="mtl_user_bottom_rz">已认证</view>
										</view>

									</view>
								</view>
								<view class="main_top_right">
									<uv-icon name="empty-address" size="32rpx"></uv-icon>
									<view class="address">广州</view>
								</view>
							</view>
							<view class="main_center">
								<view class="mc_text">
									<view class="mc_title word">
										这是标题
									</view>
									<view class="mc_content word">
										内容介绍
									</view>
								</view>
								<view class="mc_imgs">
									<image src="../../static/logo.png"></image>
									<image src="../../static/logo.png"></image>
									<image src="../../static/logo.png"></image>
								</view>
							</view>
							<view class="main_bottom">
								<view class="mb_w">
									<uv-icon name="camera"></uv-icon>
									<view class="count">22</view>
								</view>
								<view class="mb_w">
									<uv-icon name="chat"></uv-icon>
									<view class="count">22</view>
								</view>
								<view class="mb_w">
									<uv-icon name="thumb-up"></uv-icon>
									<view class="count">22</view>
								</view>
							</view>
						</li>

					</ul>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
					name: '动态',
				}, {
					name: '作品',
				}]
			}
		},
		methods: {
			loadData() {
                  console.log('加载数据')
			}
		}
	}
</script>

<style scoped>
	@import url(./userInfo.css);
</style>